<template>
	<view class="container">
		<Navbar fixed />
		<view class="password">
			<view class="password-title">
				Change your password
			</view>
			<view class="password-input">
				<text>Original password ：</text>
				<view class="input-card">
					<input class="uni-input" v-model="oldPassword" :focus="isFocus" placeholder="Original password"
						placeholder-style="color: #ffffff" @focus="handleFocus" @blur="handleBlur" />
				</view>
			</view>
			<view class="password-input">
				<text>New passwords :</text>
				<view class="input-card">
					<input class="uni-input" v-model="password" :focus="isPasswordFocus" placeholder="New passwords"
						placeholder-style="color: #ffffff" @focus="handlePasswordFocus" @blur="handlePasswordBlur" />
				</view>
			</view>
			<view class="password-input">
				<button class="password-save" @click="savePassword">Save</button>
			</view>

		</view>
	</view>
</template>

<script setup name="password">
	import Navbar from '@/components/Navbar/Navbar.vue'
	import {
		navigateTo,
		toast
	} from '@/utils';

	// 导入登录相关的自定义hook
	import useInputHook from '@/pages/login/login.js';

	import useUserStore from '@/store/user';

	// 使用自定义hook管理表单的输入状态
	const {
		inputValue: oldPassword,
		isFocus,
		handleFocus,
		handleBlur
	} = useInputHook();

	// 使用自定义hook管理表单的输入状态
	const {
		inputValue: password,
		isFocus: isPasswordFocus,
		handleFocus: handlePasswordFocus,
		handleBlur: handlePasswordBlur,
	} = useInputHook();


	const savePassword = () => {

		if (!oldPassword.value) {
			return toast("请输入旧密码", "error")
		}

		if (!password.value) {
			return toast("请输入新密码", "error")
		}


		if (!(/^[A-Za-z0-9]{5,20}$/.test(password.value))) {
			return toast('密码格式错误', 'error')
		}


		useUserStore().userUpdatePassword(oldPassword.value, password.value)

		// navigateTo("/pages/login/index")
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 84rpx 60rpx;
	}

	.password {
		width: 100%;
		padding-top: 20rpx;

		&-title {
			color: #b2b2b2;
			text-align: left;
			font-family: "PINGFANG-BOLD";
			font-weight: 500;
			margin-bottom: 50rpx;
		}

		&-input {
			padding: 20rpx;

			text {
				color: #b2b2b2;
				text-align: left;
				font-family: "PINGFANG-MEDIUM";
				font-size: 24.42rpx;
				font-style: normal;
				font-weight: 500;
				line-height: normal;
			}

			.input-card {
				margin-top: 14rpx;
				width: 100%;
				height: 98rpx;
				background: var(--Gray-90, #141b31);
				padding: 28rpx;
				justify-content: space-between;
				align-items: center;
				border-radius: 20rpx;
				display: flex;
				gap: 14rpx;
				transition: all 0.375s;

				.uni-input {
					color: #ffffff;
					width: 100%;
					font-family: PINGFANG-MEDIUM;
				}
			}

			.password-save {
				margin-top: 50rpx;
				height: 100rpx;
				background-color: #B8CEF6;
				color: #000000;
				font-family: "PINGFANG-HEAVY";
				font-size: 28rpx;
				font-style: normal;
				font-weight: 700;
				line-height: 100rpx;
			}
		}
	}
</style>